<div class="change">
  <div class="change-container">
    <header class="Turb">
      <div class="main-query" fxLayout="row">
        <!--查询时间表单选择-->
        <section>
          起始时间:
          <p-calendar [locale]="en" [(ngModel)]="startTime"></p-calendar>
        </section>
        <section>
          结束时间:
          <p-calendar [locale]="en" [(ngModel)]="endTime"></p-calendar>
        </section>
        <section>
          <button class="button-trend" (click)="onSearch()">确定</button>
        </section>
        <div class="time-btn">
          <span [ngClass]="{on:active==0}" (click)="onClickHeader(0)">近一个月</span>
          <span [ngClass]="{on:active==1}" (click)="onClickHeader(1)">近三个月</span>
          <span [ngClass]="{on:active==2}" (click)="onClickHeader(2)">近一年</span>
          <i class="exp"><a (click)="exportData()" id="ex">导出</a></i>
        </div>
      </div>
      <div class="title" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave($event)">
        {{currentDevice?.farmName}}{{currentDevice?.deviceName}}
        <span></span>
        <div class="turbine-selector-show" [hidden]="!showSelector">

          <app-device-selector
            class="detail-select"
            [multipleDevice]="false"
            [display]="true"
            [farmCategory]="farmCategory"
            [deviceCategories]="deviceCategory"
            (selectedDevicesChange)="onSelectFarmRadio($event)">
          </app-device-selector>
        </div>
      </div>
    </header>

    <div class="main">
      <section>
        <div class="echarts">
          <div class="line-echarts">
            <!--曲线图  -->
            <app-compare-echarts [maxPower]="maxPower" [series]="powerSeries" [legend]="powerLegend"></app-compare-echarts>
          </div>
        </div>
        <div class="line-point">
          <div class="bottom">
            <div class="bottom-box">
              <p *ngIf="windPowerHigh">实测功率曲线偏高！</p>
              <p *ngIf="windPowerLow">实测功率曲线偏低！</p>
              <p *ngIf="widthVarSpread">功率主带散点分布分散！</p>
              <p *ngIf="widthVarUnnomal">功率主带形状异常！</p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!--实测功率曲线表格导出  -->
    <div class="tab-excel" hidden>
      <!-- 设置border="1"以显示表格框线 -->
      <table id="ex-tab" border="1">
        <!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->
        <caption>{{currentDevice?.farmName}}{{currentDevice?.deviceName}}实测功率曲线</caption>
        <thead>
          <tr>
            <th>序号</th>
            <th>风速(m/s)</th>
            <th>功率(kW)</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of actualWindPowerData; let i=index">
            <td>{{ i + 1}}</td>
            <td>{{item.windSpeed}}</td>
            <td>{{item.griPower}}</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

  <!--进度条  -->
  <div class="masker-wp" *ngIf="windPowerDrawService?.drawProgress">
    <div class="masker"></div>
    <div class="process-bar">
      <mat-progress-bar class="progress" [color]="color" [mode]="mode">
      </mat-progress-bar>
    </div>
  </div>
</div>
